<template>
  <div>
    <h1 style="font-size: 28px">修改密码</h1>
    <div>
      <a-form :label-col="{ span: 4 }" :wrapper-col="{ span: 14 }">
        <a-form-item label="原密码" required>
          <a-input type="password" v-model:value="old_password"/>
        </a-form-item>
        <a-form-item label="新密码" required>
          <a-input type="password" v-model:value="new_password"/>
        </a-form-item>
        <a-form-item label="确认密码" required>
          <a-input type="password" v-model:value="confirm_password"/>
        </a-form-item>
        <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
          <a-button type="primary" style="width: 140px;" @click="onConfirm">确定</a-button>
          <a-button style="width: 140px;margin-left: 20px;" @click="onBack">返回</a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script lang="ts">
  import {createVNode, defineComponent, ref, reactive, toRefs} from 'vue';
  import {message, Modal} from 'ant-design-vue';
  import {ExclamationCircleOutlined} from '@ant-design/icons-vue';
  import {modifyUserPwd} from "/@/api/sys/user";
  import {HttpResult} from "/@/api/core/model/coreModel";
  import {useUserStore} from '/@/store/modules/user';
  import {CoreUtils} from "/@/utils/coreUtils";

  export default defineComponent({
    name: 'ModifyPwd',
    components: {},
    props: {
      item: {
        type: Object,
        default: null,
      },
      viewType: {
        type: String,
        default: null,
      }
    },
    setup(props, {emit}) {

      const userStore = useUserStore();

      const data = reactive({
        old_password: '',
        new_password: '',
        confirm_password: '',
      });

      const onConfirm = () => {
        if (!CoreUtils.isPassword(data.old_password)) {
          message.warn("请输入6-15位的原密码");
          return;
        }
        if (!CoreUtils.isPassword(data.new_password)) {
          message.warn("请输入6-15位的新密码");
          return;
        }
        if (data.new_password != data.confirm_password) {
          message.warn("两次输入的新密码不相同，请重新输入");
          return;
        }
        Modal.confirm({
          title: '确定要修改密码？',
          icon: createVNode(ExclamationCircleOutlined),
          content: '',
          onOk() {
            modifyUserPwd({
              old_password: data.old_password,
              new_password: data.new_password,
            }).then((result: HttpResult) => {
              if (result.code == 0) {
                message.success("修改成功，请重新登录");
                userStore.logout(true);
              } else {
                message.error(result.message);
              }
            });
          },
          onCancel() {
          },
        });
      }

      const onBack = () => {
        emit("my-emit", 'Cancel');
      }

      return {
        ...toRefs(data),
        onConfirm,
        onBack,
      };
    },
  });
</script>

<style scoped>

</style>
